<html><head>
  <title>NEGATED :target pseudo-class</title>
  <style type="text/css">p { background-color: navy; color: white; }
p:not(:target) { background-color: white; color: black; }</style>
  <link rel="author" title="Daniel Glazman" href="http://glazman.org/">
  <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
  <link rel="help" href="https://www.w3.org/TR/css3-selectors/#selectors"> <!-- bogus link to make sure it gets found -->
  <meta name="flags" content=" interact">
 </head>
 <body>
<!--[ELEMENT('p:not(:target)')]--><p id="first"><!--[TEXT('p:not(:target)')]-->This paragraph should be unstyled.
       The background of the following paragraph should become blue when
       you follow <!--[/TEXT('p:not(:target)')]--><a href="#second"><!--[TEXT('p:not(:target)')]-->this link<!--[/TEXT('p:not(:target)')]--></a><!--[TEXT('p:not(:target)')]-->.<!--[/TEXT('p:not(:target)')]--></p><!--[/ELEMENT('p:not(:target)')]-->
<!--[ELEMENT('p:not(:target)')]--><p id="second"><!--[TEXT('p:not(:target)')]-->This paragraph should initially be unstyled.
       It should become blue when you select the link above. When you select
       <!--[/TEXT('p:not(:target)')]--><a href="#third"><!--[TEXT('p:not(:target)')]-->this link<!--[/TEXT('p:not(:target)')]--></a><!--[TEXT('p:not(:target)')]-->, it should return to being unstyled and the
       background of the paragraph below should become blue.<!--[/TEXT('p:not(:target)')]--></p><!--[/ELEMENT('p:not(:target)')]-->
<!--[ELEMENT('p:not(:target)')]--><p id="third"><!--[TEXT('p:not(:target)')]-->This paragraph should initially be unstyled.
       It should become blue when you select the link above. When you follow
       <!--[/TEXT('p:not(:target)')]--><a href="#missing"><!--[TEXT('p:not(:target)')]-->this link<!--[/TEXT('p:not(:target)')]--></a><!--[TEXT('p:not(:target)')]-->, the three paragraphs
       should all return to being unstyled.<!--[/TEXT('p:not(:target)')]--></p><!--[/ELEMENT('p:not(:target)')]-->

</body></html>